<template>
  <div class="s-pagination">
    <!-- 左箭头 -->
    <button
      type="button"
      class="btn-prev icon number"
      @click="prevClick"
      :disabled="myPageNo <= 1"
    >
      <scion type="3.1 返回1" />
    </button>
    <!-- 页码 -->
    <ul>
      <button
        :class="{
          icon: true,
          number: true,
          active: myPageNo === 1,
        }"
        @click="myPageNo = 1"
      >
        1
      </button>
      <!-- 左省略符 -->
      <scion
        type="more"
        class="icon number iconfont icon-ellipsis"
        v-if="startEnd.start > 2"
      />
      <button
        v-for="(num, index) in startEnd.end - startEnd.start + 1"
        :key="startEnd.start + index"
        :class="{
          number: true,
          icon: true,
          active: myPageNo === startEnd.start + index,
        }"
        @click="myPageNo = startEnd.start + index"
      >
        {{ startEnd.start + index }}
      </button>
      <!-- 右省略符 -->
      <scion
        type="more"
        class="number icon iconfont icon-ellipsis"
        v-if="startEnd.end < allPage - 1"
      />
      <!-- 左按钮 -->
      <button
        :class="{
          number: true,
          icon: true,
          active: myPageNo === allPage,
        }"
        @click="myPageNo = allPage"
        v-if="allPage > 1"
      >
        {{ allPage }}
      </button>
    </ul>
    <!-- 右箭头 -->
    <button
      type="button"
      class="btn-next icon number"
      @click="nextClick"
      :disabled="myPageNo >= allPage"
    >
      <scion type="3.1 返回2" />
    </button>
    <!-- 显示条数下拉框 -->
    <select class="number s-select-dropdown__list" v-model="myPageSize">
      <option :value="size" v-for="size in pageSizes" :key="size">
        每页 {{ size }} 条
      </option>
    </select>
    <!-- 商品总数 -->
    <span class="s-pagination__total">共 {{ total }} 条</span>
  </div>
</template>
<script lang="ts">
export default {
  name: "SPagination",
};
</script>

<script lang="ts" setup>
import { ref, defineProps, computed, watch, defineEmits } from "vue";
import scion from "@/components/sicon/sicon.vue";
// 属性
// total 总条数必传
// 事件
// current-change 页码变化触发   返回值 新页码
// size-change  每页条数变化触发 返回值 新每页条数
const emit = defineEmits(["current-change", "size-change"]);
const props = defineProps({
  // 页码
  currentPage: {
    type: Number,
    default: 1,
  },
  // 每页条数
  pageSize: {
    type: Number,
    default: 5,
  },
  // 每页条数选项
  pageSizes: {
    type: Array<number>,
    default: [1, 3, 5, 10, 15, 20],
  },
  // 总条数
  total: {
    type: Number,
    default: 0,
  },
});
const myPageNo = ref(props.currentPage);
const myPageSize = ref(props.pageSize);
// const xxx = computed(()=>{});
// 总页数
const allPage = computed(() => {
  return Math.ceil(props.total / myPageSize.value);
});
// 中间按钮
const startEnd = computed(() => {
  if (allPage.value <= 1) {
    return {
      start: 2,
      end: 1,
    };
  }
  if (allPage.value <= 7) {
    return {
      start: 2,
      end: allPage.value - 1,
    };
  }
  // 中间开始按钮
  let start = myPageNo.value - 2;
  // 中间开始按钮的最小值
  start < 2 && (start = 2);

  // 中间结束按钮
  let end = start + 4;
  // 中间结束按钮的最大值
  if (end > allPage.value - 1) {
    end = allPage.value - 1;
    start = end - 4;
  }
  return {
    start,
    end,
  };
});

// 左箭头
const prevClick = () => {
  myPageNo.value > 1 && myPageNo.value--;
};
// 右箭头
const nextClick = () => {
  myPageNo.value < allPage.value && myPageNo.value++;
};
// 监听页码变化
watch(myPageNo, (newPageNo) => {
  emit("current-change", newPageNo)
});
// 监听每页条数变化
watch(myPageSize, (newPageSize) => {
  // 每页条数发生变化，可能会导致当前页码超过了allPage
  if (myPageNo.value > allPage.value) {
    myPageNo.value = allPage.value;
  }
  emit("size-change", newPageSize);
});
</script>

<style lang="less" scoped>
.s-pagination {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-size: 14px;
  // font-weight: 700;
}

.s-pager {
  width:20%;
  display: flex;
  justify-content: space-around;

}

.number {
  margin: 0 5px;
  padding: 0 4px;
  vertical-align: top;
  display: inline-block;
  background: #f4f4f5;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  outline: none;
  border: none;

  &:disabled {
    color: #ccc;
    cursor: not-allowed;
  }

  &:hover:not(.active, .s-select-dropdown__list, .btn-next, .btn-prev, ) {
    color: #e1251b;
  }

  option {
    text-align: left;
  }
}

.s-pagination__total {
  padding: 0 4px;
  font-size: 13px;
  font-weight: bold;
}

.active {
  background: #1b95ff;
  color: #fff;
  cursor: default;
}

.s-select-dropdown__list {
  margin: 0 10px;
  list-style: none;
  border: 1px solid #ccc;
  background-color: #fff;
}
.icon {
  line-height: 20px;
  font-size: 18px;
  padding: 4px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
  text-align: center;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  &:hover:not(.active, .btn-next, .btn-prev) {
    color: #e1251b;
  }
}
.active {
  background-color: #e1251b;
  color: #fff;
}

.btn-prev,
.btn-next {
  cursor: pointer;
  margin: 0;
  outline: none;
  border: none;
  &:disabled {
    color: #c0c4cc;
    cursor: not-allowed;
  }
}

.s-pagination__sizes {
  outline: none;
  margin: 0 20px;
  height: 28px;
}

.s-pagination__total {
  font-weight: 400;
  color: #606266;
  font-size: 13px;
}
</style>
